var imgArr = [];
//构造函数
function Slider(opts) {
	//构造函数需要的参数
	this.wrap = opts.dom;
	this.list = opts.list;
	this.bottomOffSet = 13; //图片底部每张图片往下的偏移量
	//构造三步奏
	this.init();
	this.renderDOM();
	this.bindDOM();
}

function img() {};

//第一步 -- 初始化
Slider.prototype.init = function() {
	//设定窗口比率
	this.radio = window.innerHeight / window.innerWidth;
	//设定一页的宽度
	this.scaleW = window.innerWidth * 0.9;
	this.height = window.innerHeight;
	this.imgHeight = this.scaleW * 1.3 //高宽比1920/1080=1.77
		//设定初始的索引值
	this.idx = 0;
	var data = this.list;
	var len = data.length;

	for (var i = 0; i < len; i++) {
		var imgitem = new img();
		imgitem.width = this.scaleW;
		imgitem.height = this.imgHeight;
		imgitem.src = data[i]["img"];
		imgitem.zIndex = len - i;
		imgitem.x = 0;
		imgitem.y = i * this.bottomOffSet * 3;
		imgitem.scale = 1 - i / 10;
		imgArr.push(imgitem);
	}
};

//第二步 -- 根据数据渲染DOM
Slider.prototype.renderDOM = function() {
	var wrap = this.wrap;
	//根据元素的
	for (var i = 0; i < imgArr.length; i++) {
		var img = document.createElement('img');
		var item = imgArr[i];
		if (item) {
			img.style.width = this.scaleW + 'px';
			img.style.height = this.imgHeight + 'px';
			img.src = item['src'];
			img.style.zIndex = item.zIndex;
			if (i <= 2) {
				img.style.webkitTransform = 'translate3d(0, ' + i * this.bottomOffSet * 3 + 'px, 0) scale(' + item.scale + ')';
			} else {
				img.style.webkitTransform = 'scale(' + item.scale + ')';
			}

		}
		wrap.appendChild(img);
	}
	//UL的宽度和画布宽度一致
	wrap.style.height = this.height + 'px';
	wrap.style.width = this.scaleW + 'px';
};

Slider.prototype.goIndex = function(n) {
	var idx = this.idx;
	var lis = this.wrap.getElementsByTagName('img');
	var len = lis.length;
	var cidx;
	//如果传数字 2,3 之类可以使得直接滑动到该索引
	if (typeof n == 'number') {
		cidx = idx;
		//如果是传字符则为索引的变化
	} else if (typeof n == 'string') {
		cidx = idx + n * 1;
	}

	//当索引右超出
	if (cidx > len - 1) {
		cidx = len - 1;
		//当索引左超出	
	} else if (cidx < 0) {
		cidx = 0;
	}

	//保留当前索引值
	this.idx = cidx;
	//改变过渡的方式，从无动画变为有动画
	lis[cidx].style.webkitTransition = '-webkit-transform 0.2s ease-out';
	lis[cidx - 1] && (lis[cidx - 1].style.webkitTransition = '-webkit-transform 0.2s ease-out');
	lis[cidx + 1] && (lis[cidx + 1].style.webkitTransition = '-webkit-transform 0.2s ease-out');
	lis[cidx + 2] && (lis[cidx + 2].style.webkitTransition = '-webkit-transform 0.2s ease-out');

	//改变动画后所应该的位移值
	//	lis[cidx].style.webkitTransform = 'translate3d(0, 0, 0)';
	//	lis[cidx - 1] && (lis[cidx - 1].style.webkitTransform = 'translate3d(-' + this.scaleW*0.6 + 'px, 0, 0)');
	//	lis[cidx + 1] && (lis[cidx + 1].style.webkitTransform = 'translate3d(' + this.scaleW*0.6+ 'px, 0, 0)');

//	for (var i = 0; i < len; i++) {
//		lis[i].style.webkitTransition = '-webkit-transform 0.2s ease-out';
//	}
	// lis[cidx - 1] && (lis[cidx - 1].style.webkitTransform = 'translate3d(-' + this.scaleW*0.6 + 'px, 0, 0)');
	lis[cidx - 1] && (lis[cidx - 1].style.webkitTransform = 'translate3d(-' + window.innerWidth + 'px, 0, 0)');
	lis[cidx] && (lis[cidx].style.webkitTransform = 'translate3d(0, 0 , 0) scale(1)');
	lis[cidx + 1] && (lis[cidx + 1].style.webkitTransform = 'scale(0.9) translate3d(0,' + 1 * this.bottomOffSet * 3 + 'px , 0)');
	lis[cidx + 2] && (lis[cidx + 2].style.webkitTransform = 'scale(0.8) translate3d(0,' + 2 * this.bottomOffSet * 3 + 'px , 0)');
	//lis[cidx + 3] && (lis[cidx + 3].style.webkitTransform = 'scale(0.7) translate3d(0,' + 3 * this.bottomOffSet * 3 + 'px , 0)');
};

//第三步 -- 绑定 DOM 事件
Slider.prototype.bindDOM = function() {
	var self = this;
	var scaleW = self.scaleW;
	var wrap = self.wrap;
	var len = self.list.length;

	//手指按下的处理事件
	var startHandler = function(evt) {

		//记录刚刚开始按下的时间
		self.startTime = new Date() * 1;

		//记录手指按下的坐标
		self.startX = evt.touches[0].pageX;
		self.startY = evt.touches[0].pageY;
		//清除偏移量
		self.offsetX = 0;
		self.offsetY = 0;

		//事件对象
		var target = evt.target;
		//		while (target.nodeName != 'LI' && target.nodeName != 'BODY') {
		//			target = target.parentNode;
		//		}
		self.target = target;

	};

	//手指移动的处理事件
	var moveHandler = function(evt) {
			//兼容chrome android，阻止浏览器默认行为
			evt.preventDefault();

			//计算手指的偏移量
			self.offsetX = evt.targetTouches[0].pageX - self.startX;
			self.offsetY = evt.targetTouches[0].pageY - self.startY;

			var lis = wrap.getElementsByTagName('img');

			//起始索引
			var i = self.idx - 1;
			//结束索引
			var m = i + 3;
			var idx=self.idx;
			//最小化改变DOM属性
			lis[idx] && (lis[idx].style.webkitTransition = '-webkit-transform 0s ease-out');
			lis[idx + 1] && (lis[idx + 1].style.webkitTransition = '-webkit-transform 0s ease-out');
			lis[idx + 2] && (lis[idx + 2].style.webkitTransition = '-webkit-transform 0s ease-out');
			lis[idx] && (lis[idx].style.webkitTransform = 'translate3d(' + self.offsetX + 'px, '+self.offsetY+'px, 0)');
			//lis[idx + 1] && (lis[idx + 1].style.webkitTransform = 'scale(1)');
			//lis[idx + 2] && (lis[idx + 2].style.webkitTransform = 'scale(0.9)');
		}
		//手指抬起的处理事件
	var endHandler = function(evt) {
		evt.preventDefault();

		//边界就翻页值
		var boundary = scaleW / 6;

		//手指抬起的时间值
		var endTime = new Date() * 1;

		//所有列表项
		var lis = wrap.getElementsByTagName('img');

		//当手指移动时间超过300ms 的时候，按位移算
		if (endTime - self.startTime > 300) {
			if (self.offsetX >= boundary) {
				self.goIndex('-1');
			} else if (self.offsetX < 0 && self.offsetX < -boundary) {
				self.goIndex('+1');
			} else {
				self.goIndex('0');
			}
		} else {
			//优化
			//快速移动也能使得翻页
			if (self.offsetX > 50) {
				self.goIndex('-1');
			} else if (self.offsetX < -50) {
				self.goIndex('+1');
			} else {
				self.goIndex('0');
			}
		}
	};

	//绑定事件
	wrap.addEventListener('touchstart', startHandler);
	wrap.addEventListener('touchmove', moveHandler);
	wrap.addEventListener('touchend', endHandler);
};